import 'package:chatroom_flutter_app/entity/chattab_entity.dart';
import 'package:chatroom_flutter_app/ui/widget/chat_banner.dart';
import 'package:chatroom_flutter_app/ui/widget/chat_pages.dart';
import 'package:chatroom_flutter_app/ui/widget/chat_top.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';


class ChatPage extends StatefulWidget {
  const ChatPage({Key? key}) : super(key: key);

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  List<ChatTabEntity> chatTabEntitys = [
    ChatTabEntity(icon: './assets/images/icon_chat_tab1.png',selectedIcon:'./assets/images/icon_chat_tab1_selected.png',live:'0',title:'关注'),
    ChatTabEntity(icon: './assets/images/icon_chat_tab2.png',selectedIcon:'./assets/images/icon_chat_tab2_selected.png',live:'0',title:'王者'),
    ChatTabEntity(icon: './assets/images/icon_chat_tab3.png',selectedIcon:'./assets/images/icon_chat_tab3_selected.png',live:'0',title:'LOL'),
    ChatTabEntity(icon: './assets/images/icon_chat_tab4.png',selectedIcon:'./assets/images/icon_chat_tab4_selected.png',live:'0',title:'绝地'),
    ChatTabEntity(icon: './assets/images/icon_chat_tab5.png',selectedIcon:'./assets/images/icon_chat_tab5_selected.png',live:'0',title:'唱见'),
    ChatTabEntity(icon: './assets/images/icon_chat_tab6.png',selectedIcon:'./assets/images/icon_chat_tab6_selected.png',live:'0',title:'手游'),
    ChatTabEntity(icon: './assets/images/icon_chat_tab7.png',selectedIcon:'./assets/images/icon_chat_tab7_selected.png',live:'0',title:'和平'),
    ChatTabEntity(icon: './assets/images/icon_chat_tab8.png',selectedIcon:'./assets/images/icon_chat_tab8_selected.png',live:'0',title:'综合'),
    ChatTabEntity(icon: './assets/images/icon_chat_tab9.png',selectedIcon:'./assets/images/icon_chat_tab9_selected.png',live:'0',title:'狼人'),
    ChatTabEntity(icon: './assets/images/icon_chat_tab10.png',selectedIcon:'./assets/images/icon_chat_tab10_selected.png',live:'0',title:'派单'),
    ChatTabEntity(icon: './assets/images/icon_chat_tab11.png',selectedIcon:'./assets/images/icon_chat_tab11_selected.png',live:'0',title:'永劫'),
  ];
  int selectChatTabIndex = 0;


  @override
  void initState() {
    super.initState();
    // setState(() {
    //   for(int i =1; i<12; i++){
    //     ChatTabEntity cte = ChatTabEntity(icon: './assets/images/icon_chat_tab${i}.png',selectedIcon:'./assets/images/icon_chat_tab${i}_selected.png',title: '${i}',live:0);
    //     chatTabEntitys.add(cte);
    //   }
    // });

  }

  Widget buildChatTabCell(BuildContext context, int index){
    ChatTabEntity chatTab = chatTabEntitys[index];
    String icon = selectChatTabIndex == index ? chatTab.selectedIcon.toString() : chatTab.icon.toString();
    Color tabColor = selectChatTabIndex == index ?  const Color(0xffffffff) : const Color(0xff333333);
    return Padding(
      padding: EdgeInsets.only(right: 8.r),
      child: Container(
      width: 95.4.r,
      height: 48.r,
      decoration: BoxDecoration(
          image: DecorationImage(image: AssetImage(icon))
      ),
      child: Stack(
        children: [
          Positioned(
              top: 7.r,
              right: 18.5.r,
              child: Column(
                children: [
                  Text(chatTab.title.toString(),style: TextStyle(fontSize: 13.sp,color: tabColor),),
                  SizedBox(height: 1.r),
                  Text(chatTab.live.toString(),style: TextStyle(fontSize: 10.sp,color: tabColor),)
                ],
              )
          )
        ],
      ),
    ),);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(

        child: Column(
          mainAxisSize: MainAxisSize.min,
          children:  [
            const ChatTop(),
            // Padding(
            //     padding: EdgeInsets.only(left: 15.r,top: 10.r,right: 15.r,bottom: 12.r),
            //     child:  const ChatBanner(),
            // ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 15.r),
              child: SizedBox(
                height: 48.r,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    itemBuilder: buildChatTabCell,
                    itemCount: chatTabEntitys.length
                ),
              ),
            ),
            const ChatPages()


          ],
        ),
        // child: SingleChildScrollView(
        //   child: Column(
        //     mainAxisSize: MainAxisSize.min,
        //     children:  [
        //         const ChatTop(),
        //         // Padding(
        //         //     padding: EdgeInsets.only(left: 15.r,top: 10.r,right: 15.r,bottom: 12.r),
        //         //     child:  const ChatBanner(),
        //         // ),
        //         Padding(
        //           padding: EdgeInsets.symmetric(horizontal: 15.r),
        //           child: SizedBox(
        //             height: 48.r,
        //             child: ListView.builder(
        //                 scrollDirection: Axis.horizontal,
        //                 itemBuilder: buildChatTabCell,
        //                 itemCount: chatTabEntitys.length
        //             ),
        //           ),
        //         ),
        //         const ChatTabs()
        //
        //
        //     ],
        //   ),
        // )
    );
  }
}
